<template>
  <view class="data-query-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <text class="nav-back" @click="goBack">返回</text>
      <text class="nav-title">账单查询</text>
      <text class="nav-search" @click="showSearchModal">高级搜索</text>
    </view>




    <!-- 数据列表 -->
    <view class="data-list">
      <view 
        class="data-item" 
        v-for="item in dataList" 
        :key="item.id"
        @click="viewDetail(item)"
      >
        <view class="item-header">
          <text class="item-title">{{ item.jzxm }}</text>
          <!-- <text class="item-status" :class="getStatusClass(item.sfzs)">
            {{ getStatusText(item.sfzs) }}
          </text> -->
        </view>
        <view class="item-content">
          <view class="item-row">
            <text class="item-label">机主姓名：</text>
            <text class="item-value">{{ item.jzxm }}</text>
          </view>
          <view class="item-row">
            <text class="item-label">联系电话：</text>
            <text class="item-value">{{ item.zjlxdh }}</text>
          </view>
          <view class="item-row">
            <text class="item-label">房东姓名：</text>
            <text class="item-value">{{ item.landlordName }}</text>
          </view>
          <view class="item-row">
            <text class="item-label">房东电话：</text>
            <text class="item-value">{{ item.landlordPhone }}</text>
          </view>
          <view class="item-row">
            <text class="item-label">月租金：</text>
            <text class="item-value">¥{{ item.monthPrice }}</text>
          </view>
          <view class="item-row">
            <text class="item-label">详细地址：</text>
            <text class="item-value">{{ getFullAddress(item) }}</text>
          </view>
          <view class="item-row">
            <text class="item-label">门禁编码：</text>
            <text class="item-value">{{ item.door }}</text>
          </view>
        </view>
        <view class="item-footer">
          <text class="item-date">截止日期：{{ item.endDate }}</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="dataList.length === 0 && !loading">
      <text class="empty-text">暂无数据</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 高级搜索弹窗 -->
    <uni-popup ref="searchPopup" type="bottom">
      <view class="search-popup">
        <view class="popup-header">
          <text class="popup-title">高级搜索</text>
          <text class="popup-close" @click="$refs.searchPopup.close()">×</text>
        </view>
        <view class="popup-content">
          <view class="search-item">
            <text class="search-label">房东姓名</text>
            <uni-easyinput
              v-model="advancedSearch.landlordName"
              placeholder="请输入房东姓名"
              :clearable="true"
            />
          </view>
          <view class="search-item">
            <text class="search-label">房东手机号</text>
            <uni-easyinput
              v-model="advancedSearch.landlordPhone"
              placeholder="请输入房东手机号"
              :clearable="true"
            />
          </view>
          <view class="search-item">
            <text class="search-label">机主姓名</text>
            <uni-easyinput
              v-model="advancedSearch.jzxm"
              placeholder="请输入机主姓名"
              :clearable="true"
            />
          </view>
          <view class="search-item">
            <text class="search-label">地址关键词</text>
            <uni-easyinput
              v-model="advancedSearch.address"
              placeholder="请输入地址关键词"
              :clearable="true"
            />
          </view>
        </view>
        <view class="popup-footer">
          <button class="btn-reset" @click="resetAdvancedSearch">重置</button>
          <button class="btn-search" @click="confirmAdvancedSearch">搜索</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getAdslList } from '@/api/door/house'

export default {
  data() {
    return {
      searchKeyword: '',
      dateRange: {
        start: '',
        end: ''
      },
      selectedArea: {
        province: '',
        city: '',
        district: ''
      },
      dataList: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      advancedSearch: {
        landlordName: '',
        landlordPhone: '',
        jzxm: '',
        address: ''
      }
    }
  },
  computed: {
    dateRangeText() {
      if (this.dateRange.start && this.dateRange.end) {
        return `${this.dateRange.start} 至 ${this.dateRange.end}`
      }
      return '全部时间'
    },
    areaText() {
      const { province, city, district } = this.selectedArea
      if (province && city && district) {
        return `${province} ${city} ${district}`
      } else if (province && city) {
        return `${province} ${city}`
      } else if (province) {
        return province
      }
      return '全部地区'
    }
  },
  onLoad() {
    this.loadData()
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.refreshData()
  },
  // 上拉加载更多
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore()
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    // 显示搜索弹窗
    showSearchModal() {
      this.$refs.searchPopup.open()
    },
    
    // 处理搜索
    handleSearch() {
      this.pageNum = 1
      this.loadData()
    },
    
    // 处理清空
    handleClear() {
      this.searchKeyword = ''
      this.pageNum = 1
      this.loadData()
    },
    
    // 处理输入
    handleInput() {
      // 可以在这里实现实时搜索
    },
    
    // 显示日期选择器
    showDatePicker() {
      // 这里可以实现日期范围选择
      this.$modal.msgInfo('日期筛选功能开发中')
    },
    
    // 显示地区选择器
    showAreaPicker() {
      // 这里可以实现地区选择
      this.$modal.msgInfo('地区筛选功能开发中')
    },
    
    // 加载数据
    async loadData() {
      if (this.loading) return
      
      this.loading = true
      try {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        
        // 添加搜索关键词
        if (this.searchKeyword) {
          params.keyword = this.searchKeyword
        }
        
        // 添加高级搜索参数
        if (this.advancedSearch.landlordName) {
          params.landlordName = this.advancedSearch.landlordName
        }
        if (this.advancedSearch.landlordPhone) {
          params.landlordPhone = this.advancedSearch.landlordPhone
        }
        if (this.advancedSearch.jzxm) {
          params.jzxm = this.advancedSearch.jzxm
        }
        if (this.advancedSearch.address) {
          params.address = this.advancedSearch.address
        }
        
        console.log('查询参数:', params)
        const response = await getAdslList(params)
        
        if (response.code === 200) {
          if (this.pageNum === 1) {
            this.dataList = response.rows || []
          } else {
            this.dataList = [...this.dataList, ...(response.rows || [])]
          }
          
          this.hasMore = response.rows && response.rows.length === this.pageSize
          console.log('查询结果:', response.total, '条数据')
        } else {
          this.$modal.msgError(response.msg || '获取数据失败')
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$modal.msgError('网络异常，请稍后重试')
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    
    // 刷新数据
    refreshData() {
      this.pageNum = 1
      this.loadData()
    },
    
    // 加载更多
    loadMore() {
      this.pageNum++
      this.loadData()
    },
    
    // 查看详情
    viewDetail(item) {
      console.log('查看详情:', item.id)
      uni.navigateTo({
        url: `/pages/data/detail?id=${item.id}`
      })
    },
    
    // 获取完整地址
    getFullAddress(item) {
      const { provinceName, cityName, districtName, streetName, villageName, address } = item
      return `${provinceName} ${cityName} ${districtName} ${streetName} ${villageName} ${address}`
    },
    
    // 获取状态样式
    getStatusClass(sfzs) {
      if (sfzs === '是') {
        return 'status-normal'
      } else if (sfzs === '否') {
        return 'status-overdue'
      } else {
        return 'status-zero'
      }
    },
    
    // 获取状态文本
    getStatusText(sfzs) {
      if (sfzs === '是') {
        return '正常'
      } else if (sfzs === '否') {
        return '异常'
      } else {
        return '未知'
      }
    },
    
    // 重置高级搜索
    resetAdvancedSearch() {
      this.advancedSearch = {
        landlordName: '',
        landlordPhone: '',
        jzxm: '',
        address: ''
      }
      this.pageNum = 1
      this.loadData()
    },
    
    // 确认高级搜索
    confirmAdvancedSearch() {
      this.pageNum = 1
      this.loadData()
      this.$refs.searchPopup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.data-query-container {
  background-color: #f5f6f7;
  min-height: 100vh;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  
  .nav-back {
    color: #007AFF;
    font-size: 28rpx;
  }
  
  .nav-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .nav-search {
    color: #007AFF;
    font-size: 28rpx;
  }
}

.search-bar {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
}

.filter-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
  
  .filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .filter-label {
      font-size: 28rpx;
      color: #333;
    }
    
    .filter-value {
      font-size: 26rpx;
      color: #666;
      flex: 1;
      text-align: right;
      margin-right: 20rpx;
    }
    
    .filter-arrow {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.data-list {
  padding: 20rpx;
}

.data-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .item-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      flex: 1;
    }
    
    .item-status {
      font-size: 24rpx;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      
      &.status-normal {
        background-color: #e8f5e8;
        color: #52c41a;
      }
      
      &.status-overdue {
        background-color: #fff2f0;
        color: #ff4d4f;
      }
      
      &.status-zero {
        background-color: #f5f5f5;
        color: #999;
      }
    }
  }
  
  .item-content {
    .item-row {
      display: flex;
      margin-bottom: 15rpx;
      
      .item-label {
        font-size: 26rpx;
        color: #666;
        width: 150rpx;
      }
      
      .item-value {
        font-size: 26rpx;
        color: #333;
        flex: 1;
      }
    }
  }
  
  .item-footer {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #f0f0f0;
    
    .item-date {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
  
  .loading-text {
    font-size: 28rpx;
    color: #666;
  }
}

.search-popup {
  padding: 30rpx;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  position: relative;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }

    .popup-close {
      font-size: 48rpx;
      color: #999;
    }
  }

  .popup-content {
    .search-item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .search-label {
        font-size: 28rpx;
        color: #333;
        width: 150rpx;
      }

      .uni-easyinput {
        flex: 1;
        border: 1px solid #eee;
        border-radius: 10rpx;
        padding: 10rpx 20rpx;
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  .popup-footer {
    display: flex;
    justify-content: space-around;
    padding-top: 30rpx;
    border-top: 1px solid #eee;

    .btn-reset, .btn-search {
      flex: 1;
      margin: 0 10rpx;
      padding: 15rpx 0;
      border-radius: 10rpx;
      font-size: 32rpx;
      font-weight: bold;
    }

    .btn-reset {
      background-color: #f0f0f0;
      color: #333;
      border: 1px solid #eee;
    }

    .btn-search {
      background-color: #007AFF;
      color: #fff;
      border: none;
    }
  }
}
</style> 